<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>个人</title>
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
    <!-- 导入默认样式 -->
    <link rel="stylesheet" href="./css/reset.css">
    <!-- 导入我的样式 -->
    <link rel="stylesheet" href="./css/my.min.css">
    <!-- 导入进度条 -->
    <link rel="stylesheet" href="./css/nprogress.min.css">
    <script src="./js/nprogress.min.js"></script>
    <!-- 导入axios -->
    <script src="./js/axios.min.js"></script>
    <!-- 导入axios二次封装 -->
    <script src="./js/request.js"></script>
    <!-- 导入login的请求js -->
    <script src="./api/login.js"></script>
</head>

<body>
    <div class="my" style="background-color: #fff">
        <div class="top" style="border-bottom: 1px solid grey;">
            <div class="left">登录</div>
            <p>登录页面</p>
        </div>
        <div class="content" style="width: 100%;">
            <div style="margin-top: 40px;margin: 20px;height: 400px;">
                <h2 style="line-height: 200px;">🏀学生登录</h2>
                <div style="display: flex;">
                    <input type="email" placeholder="请输入邮箱" id="inpemail" style="width: 70%;height: 30px;border: 0;border-bottom: 1px solid grey;outline: none;">
                    <button style="flex: 1;" id="getcode">获取验证码</button>
                </div>
                <input type="text" placeholder="请输入验证码" id="inpcode" style="width: 100%;height: 30px;margin-top: 5px;border: 0;border-bottom: 1px solid grey;outline: none;">
                <button onclick="submitlogin()" style="width: 100%;height: 40px;margin-top: 30px;background-color: rgb(45, 119, 194);color: #fff;">登录</button>
            </div>
        </div>
        <div class="footer">
            <div onclick="window.location.href = './home.html'">
                <p><img src="http://s08vr7vdh.hn-bkt.clouddn.com/home.png" alt=""></p>
                <p>主页</p>
            </div>
            <div onclick="window.location.href = './category.html'">
                <p><img src="http://s08vr7vdh.hn-bkt.clouddn.com/cate.png" alt=""></p>
                <p>分类</p>
            </div>
            <div onclick="window.location.href = './my.html'">
                <p><img src="http://s08vr7vdh.hn-bkt.clouddn.com/my.png" alt=""></p>
                <p>个人</p>
            </div>
        </div>
    </div>
    <script>
        const code = document.getElementById("getcode")
        code.onclick = function(){
            //获取邮箱
            const email = document.getElementById("inpemail").value
            //校验 371900521@qq.com
            const reg = /^[0-9a-z]{3,15}@[0-9a-z]{2,9}\.[a-z]{2,9}$/i
            if(!reg.test(email)) return alert("邮箱格式不对!")

            //验证码按钮倒计时
            let time = 5;
            let timer = setInterval(()=>{
                time--
                this.innerHTML = time + 's'
                this.disabled = true;
                if(time<=0){
                    clearInterval(timer)
                    this.innerHTML = "获取验证码"
                    this.disabled = false;
                }
            },1000)

            //发送ajax,获取验证码
            getcheckedcode(email)
            .then(res=>{
                console.log(res);
                if(res.code == 200){
                    localStorage.setItem("code",res.msg)
                }
            })
        }

        function submitlogin(){
            //获取用户输入的验证码
            const code1 = document.getElementById("inpcode").value
            const code2 = localStorage.getItem("code")
            if(code1 == code2) {
                window.alert("登录成功")
                window.localStorage.setItem("isLogin",1)
                //登录成功,跳转到个人中心
                window.location.href = "./center.html"
            }else{
                window.localStorage.removeItem("isLogin")
                location.reload();
            }
        }
    </script>
</body>

</html>